<template>
  <div id="login">

    <div id="forms">
      <div style="font-size: 30px; color: black;margin-left: 200px">JRWY平台</div>
      <el-form :rules="rules" :model="loginUser" ref="loginUser" label-width="100px"
               style="margin-left:-25px;margin-top: 20px;">
        <el-form-item label="" prop="account">
          <label style="color: black;font-family: 微软雅黑">用户名称:</label>
          <el-input v-model="loginUser.account" style="width: 340px; margin-left: 10px;" @blur="nameBlur"
                    type="text"></el-input>
          <span id="account_error_msg"></span>
        </el-form-item>
        <el-form-item label="" prop="password">
          <label style="color: black;font-family: 微软雅黑">密码:</label>
          <el-input v-model="loginUser.password" style="width: 340px;margin-left: 35px" type="text"
                    @blur="passwordBlur"></el-input>
          <span id="password_error_msg"></span>
        </el-form-item>
        <el-form-item label="" prop="rePassword">
          <label style="color: black;font-family: 微软雅黑">确认密码:</label>
          <el-input v-model="loginUser.rePassword" style="width: 340px;margin-left: 10px" type="text"
                    @blur="rePasswordBlur"></el-input>
          <span id="repassword_error_msg"></span>
        </el-form-item>
        <el-form-item label="" prop="validPassword">
          <label style="color: black;font-family: 微软雅黑">验证码:</label>
          <el-input v-model="loginUser.validPassword" style="width: 130px;margin-left: 25px">
          </el-input>
          <span
              style="text-align: center; width:110px;  background-color: steelblue;color:white;cursor: pointer; display: block;float: right;margin-right: 113px;font-size: 20px;border: 1px solid #B3C0D1;border-radius:2px;"
              @click="generateCaptchaImage">{{ VertifyPassword }}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginUser')" :loading="isLoading">登录</el-button>
          <el-button style="margin-left: 269px" type="primary" @click="Cannal()">注册</el-button>
        </el-form-item>

      </el-form>

    </div>

  </div>
</template>

<script>
// 引入canvas库

import {login} from "@/api/login/user"
import axios from "axios";
import {mapState} from 'vuex'
import CreateToken from "@/utils/CreateToken";
import workconfig from "@/com_code/WorkerCode";
import store from "@/store";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  components: {},
  created() {
    console.log("用户数据", localStorage.getItem('user'));
    this.generateCaptchaImage();
    console.log(this.VertifyPassword)
  },
  computed: {
    //借助mapState生成计算属性,从state中读取数据。(数组写法)
    ...mapState(['user'])
  },
  data() {
    return {
      //是否在请求中
      isLoading: false,
      errorMsg: '',
      VertifyPassword: '',
      loginUser: {
        account: 'admin',
        password: 'admin123456',
        rePassword: 'admin123456',
        validPassword: ''
      },
      rules: {
        validPassword: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ],

      }
    };
  },
  methods: {
    nameBlur() {
      // 获取该元素
      var account_error_msg = document.getElementById('account_error_msg');
      if (this.loginUser.account === "") {
        // 设置内容
        account_error_msg.textContent = "请输入账号!";
        // 设置样式：红色文字和删除线
        account_error_msg.style.color = "red";
      } else {
        account_error_msg.textContent = "";
      }
    },
    passwordBlur() {
      // 获取该元素
      var password_error_msg = document.getElementById('password_error_msg');
      if (this.loginUser.password === "") {
        // 设置内容
        password_error_msg.textContent = "请输入密码!";
        // 设置样式：红色文字和删除线
        password_error_msg.style.color = "red";
      } else {
        // 设置内容
        password_error_msg.textContent = "";
      }
    },
    rePasswordBlur() {
      // 获取该元素
      var repassword_error_msg = document.getElementById('repassword_error_msg');
      if (this.loginUser.rePassword === "") {
        // 设置内容
        repassword_error_msg.textContent = "请输入确认密码!";
        // 设置样式：红色文字和删除线
        repassword_error_msg.style.color = "red";
      } else {
        // 设置内容
        repassword_error_msg.textContent = "";
      }
    },
    submitForm() {
      //防止多次点击
      this.isLoading = true;
      //账号、密码、验证码、确认密码不能为空,并且验证和图片中的验证码一致
      if (this.loginUser.password !== "" && this.loginUser.rePassword !== "" && this.loginUser.validPassword !== "" && this.loginUser.account !== "") {
        //验证密码是否输入正确
        if (this.loginUser.validPassword !== this.VertifyPassword) {
          this.$message({
            message: "验证码输入不正确!",
            type: 'error', // 设置消息类型为错误
            duration: 2000, // 设置消息显示时间为3秒，默认是2000毫秒
          });
          return;
        }
        //确认密码和密码是否输入正确
        if (this.loginUser.password !== this.loginUser.rePassword) {
          this.$message({
            message: "确认密码和密码输入不一致!",
            type: 'error', // 设置消息类型为错误
            duration: 2000, // 设置消息显示时间为3秒，默认是2000毫秒
          });
          return;
        }
        //发送接口请求
        login(this.loginUser).then((res) => {
          // eslint-disable-next-line no-debugger
          //密码输入有误
          console.log(res);
          if (res.data.code == workconfig.passworderror) {
            this.$message({
              message: res.data.message,
              type: 'error', // 设置消息类型为错误
              duration: 2000, // 设置消息显示时间为3秒，默认是2000毫秒
            });
            return;
          }
          if (res.data.code == workconfig.lockaccount) {
            this.$message({
              message: res.data.message,
              type: 'error', // 设置消息类型为错误
              duration: 2000, // 设置消息显示时间为3秒，默认是2000毫秒
            });
            return;
          }
          if (res.data.code == workconfig.accountnotexist) {
            this.$message({
              message: res.data.message,
              type: 'error', // 设置消息类型为错误
              duration: 2000, // 设置消息显示时间为3秒，默认是2000毫秒
            });
            return;
          }
          let account = res.data.data.account;
          let token = res.data.data.token;
          let password = res.data.data.password;
          if (account !== "" && token !== "" && password !== "") {
            if (res.data.code === workconfig.onlineLogin) {
              //清除前一个人登录浏览器的token
              // localStorage.setItem('tokenInfo', '')
              // this.store={}
              console.log(res);
              //调用vuex中的mutations的方法
              this.$store.commit("saveTokenInfo",token)
              // let user = {
              //   account: account,
              //   password: password,
              //   ttdown: CreateToken(),
              //   dtoken: token
              // }
              //传递到actions中的方法
              //this.$store.dispatch('adduser', user)
              // this.$router.push({name: 'EmployeePages', query: {user:params}})
              this.$message({
                message: '登录成功',
                type: 'success', // 设置消息类型为提示
                duration: 1000, // 设置消息显示时间为3秒，默认是2000毫秒
              });
              //this.$router.push({name: 'EmployeePageAdmins'})
              //登录跳转 /home
              // this.$router.push({name: 'home'})
              //跳转到之前的
              this.$router.push(this.$route.query.redirect||'/')
            }
          } else {
            this.$message({
              message: '登录失败请重新输入！',
              type: 'error', // 设置消息类型为提示
              duration: 2000, // 设置消息显示时间为3秒，默认是2000毫秒
            });
          }
        }).catch(error => {
          console.log("报错信息:", error);
          return;
        }).finally(() => {
          //节流
          this.isLoading = false;
        })
      }
      //账户、密码、确认密码有一个不存在就不能登录
      else {
        if (this.loginUser.account === "") {
          this.nameBlur();
        }
        if (this.loginUser.password === "") {
          this.passwordBlur();
        }
        if (this.loginUser.rePassword === "") {
          this.rePasswordBlur();
        }
        return;
      }
    },
    Cannal() {
      //编程导航
      this.$router.push({name: 'register'})
      // 刷新当前页面
      // location.reload();
    },
    generateCaptchaImage() {
      axios.get("api/vertify/vertify_code").then((res) => {
        console.log(res.data)
        this.VertifyPassword = res.data;
      }).catch(error => {
        console.log(error)
        return;
      })

    }
  }
}
</script>


<style scoped>

#login {
  background-image: url('../assets/menglong.jpg');
  //width: 100%;
  height: 100vh;
  overflow-y: hidden; /* 禁止垂直滚动条 */
  background-color: steelblue;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */

}

#poetry {
  border: 1px solid red;
  margin-top: 68px;
  float: right;
  color: white;

  ul li {
    width: 190px;
    height: 30px;
    line-height: 30px;

  }
}

#forms {
  background-color: white;
  width: 600px;
  height: 400px;
}

/*#forms :deep(.el-input__inner) {
  color: black;
  border-radius: 15px;
  background-color: transparent;
  box-shadow: inset 0px 0px 10px 5px rgb(123, 123, 138);
}*/


</style>
